<script>
// 引入mapState用于生成对应的代码，方便获取到对应的值，替换计算属性里面重复代码片段
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";

export default {
  name: 'Count',
  data: function () {
    return {
      num: 1, // 用户选择的数字
      // sum: 0 // 当前的和
    }
  },
  methods: {
    // 程序员亲自写的方法，也可以使用mapMutations进行代替生成代码片段。
    // // 【vuex的工作流程：vc组件，代表顾客，使用dispatch ===> action代表服务员，使用commit  ==> mutations代表厨师】
    // increment() {
    //   // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
    //   // this.$store.dispatch('increment', this.num);
    //   this.$store.commit('INCREMENT', this.num);
    // },
    // decrement() {
    //   // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
    //   // this.$store.dispatch('decrement', this.num);
    //   this.$store.commit('DECREMENT', this.num);
    // },

    // 【借助 mapMutations 生成上述的代码片段，其中参数需要在调用的括号里面传入，对象写法】
    // 借助 mapMutations 生成对应的方法，方法中会调用 commit 去联系 mutations，对象写法。
    ...mapMutations({
      increment: 'INCREMENT',
      decrement: 'DECREMENT',
    }),

    // 借助 mapMutations 生成对应的方法，方法中会调用 commit 去联系 mutations，数组写法。其中数组写法的话，html使用的时候必须使用大写写法。
    // ...mapMutations([
    //   'INCREMENT',
    //   'DECREMENT',
    // ]),

    /* ===============================分割线============================== */
    // 程序员亲自写的方法，也可以使用 mapActions 进行代替生成代码片段。
    // incrementOdd() {
    //   // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
    //   this.$store.dispatch('incrementOdd', this.num);
    // },
    // incrementWait() {
    //   // setTimeout(() => {
    //   //   // 使用dispatch，其中dispatch代表的就是服务员，而vc组件代表的就是顾客。
    //   //   this.$store.dispatch('incrementWait', this.num);
    //   // }, 500);
    //   this.$store.dispatch('incrementWait', this.num);
    // },

    //【借助 mapActions 生成上述的代码片段，其中参数需要在调用的括号里面传入，对象写法】
    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch 去联系 actions，对象写法
    ...mapActions({
      incrementOdd: 'incrementOdd',
      incrementWait: 'incrementWait',
    })

    // //【借助 mapActions 生成上述的代码片段，其中参数需要在调用的括号里面传入，数组写法】
    // ...mapActions([
    //   'incrementOdd',
    //   'incrementWait',
    // ])
  },
  computed: {
    // // 【靠程序员自己亲自去写计算属性】
    // // 使用计算属性获取到对应的值，方便页面直接使用插值语法获取最终的数据
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },

    // // 可以使用mapState自动生成代码片段的方式，替换上述的计算属性写法
    // ...mapState({
    //   'sum': 'sum',
    //   'school': 'school',
    //   'subject': 'subject',
    // }),

    // // 可以使用mapState自动生成代码片段的方式，替换上述的计算属性写法【其中key的单引号可以省略，方便书写】
    // // 【借助mapState生成计算属性，从state中读取数据，对象写法】
    // ...mapState({
    //   sum: 'sum',
    //   school: 'school',
    //   subject: 'subject',
    // }),

    // 【借助mapState生成计算属性，从state中读取数据，数组写法】
    ...mapState([
      'sum',
      'school',
      'subject',
    ]),

    // // 可以使用mapGetters自动生成代码片段的方式，替换上述的计算属性写法【其中key的单引号可以省略，方便书写】
    // 【借助 mapGetters 生成计算属性，从 getters 中读取数据，对象写法】
    // ...mapGetters({
    //   bigSum: 'bigSum',
    // }),
    // 【借助 mapGetters 生成计算属性，从 getters 中读取数据，数组写法】
    ...mapGetters(['bigSum',
    ])
  }
}
</script>

<template>
  <div>
    <h1>当前求和：{{ sum }}</h1>
    <h3>当前求和放大10倍：{{ sum * 10 }}</h3>
    <h3>当前求和放大10倍：{{ bigSum }}</h3>
    <h3>我在 {{ school }}，学习{{ subject }}</h3>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(num)">+</button>
    <button @click="decrement(num)">-</button>
    <button @click="incrementOdd(num)">当前求和为奇数再加+1</button>
    <button @click="incrementWait(num)">等待500毫秒+1</button>
  </div>
</template>

<style scoped>
button {
  margin-left: 5px;
}
</style>